<template>
  <div class="msg">
    <msg-header></msg-header>
    <msg-main></msg-main>
  </div>
</template>

<script>
import msgHeader  from '@/views/Message/child/msgHeader.vue'
import msgMain  from '@/views/Message/child/msgMain.vue'
export default {
  name:"message",
  components: {
    msgHeader,
    msgMain
  }

}
</script>

<style lang="less">
.msg-header {
  display: flex;
   justify-content:space-between;
  //  align-items:center;
  left: 0px;
  top: 43px;
  width: 375px;
  height: 69px;
  line-height: 20px;
  background-color: rgba(98, 166, 235, 100);
  text-align: center;
  .header-msg {
    margin : 21px 24px;
    
    width: 56px;
    height: 40px;
    // color: rgba(255, 255, 255, 100);
    font-size: 28px;
    text-align: left;
    font-family: PingFangSC-regular;
  }
  .header-img {
    width: 30px;
    margin-right: 21px;
    margin-top:8px;
    img{
      left: 326px;
      top: 52px;
      width: 28px;
      height: 28px;
    }
    span {
      width: 28px;
      height: 20px;
      font-size: 14px;
      text-align: left;
      font-family: PingFangSC-regular;
    }
  }
}

</style>